<script setup lang="ts">
import { onMounted, onUnmounted, ref, watch } from 'vue'
import Vditor from 'vditor'
import 'vditor/dist/index.css'
import { useThemeStore } from '@/store/modules/theme'
import { $t } from '@/locales'

const theme = useThemeStore()

const vditor = ref<Vditor>()
const domRef = ref<HTMLElement>()

function renderVditor() {
  if (!domRef.value) return
  vditor.value = new Vditor(domRef.value, {
    minHeight: 400,
    theme: theme.darkMode ? 'dark' : 'classic',
    icon: 'material',
    cache: { enable: false }
  })
}

const stopHandle = watch(
  () => theme.darkMode,
  newValue => {
    const themeMode = newValue ? 'dark' : 'classic'
    vditor.value?.setTheme(themeMode)
  }
)

onMounted(() => {
  renderVditor()
})

onUnmounted(() => {
  stopHandle()
})
</script>

<template>
  <div class="h-full">
    <NCard :title="$t('generate.markdown-plugin')" :bordered="false" class="rounded-8px shadow-sm">
      <div ref="domRef"></div>
      <template #footer>
        <GithubLink link="https://github.com/Vanessa219/vditor" />
      </template>
    </NCard>
  </div>
</template>

<style scoped></style>
